<!-- 首页热门推荐 -->
<template>
  <el-main class="base_main_content">
    <div>最多添加100个推荐产品</div>
    <div class="base_main_margin_top">
      <DynamicParams ref="recommendParams" :showDefault="false" :noAdd="true" :customDel="true" :customMove="true"
        :operation="{ modify:true,move:true,del:true }" :data="data" @delete="delRecommend" @modify="modifyRecommend"
        @move="sortRecommend">
        <el-table-column label="产品名称" prop="recommendItemName" align="center" />
        <el-table-column label="产品类型" align="center" width="150px">
          <template #default="scope">
            <span>{{ typeOptions[scope.row.recommendType].title }}</span>
          </template>
        </el-table-column>
      </DynamicParams>
      <div class="add_layout">
        <div @click="addRecommend('goods')" class="dashed_but">添加商品</div>
        <div @click="addRecommend('travel')" class="dashed_but">添加旅游</div>
        <div @click="addRecommend('hotel')" class="dashed_but">添加酒店</div>
      </div>
    </div>
    <ChooseProduct ref="chooseProductRef" @chooseProduct="chooseProduct"></ChooseProduct>
  </el-main>
</template>

<script setup>
import { ref } from "vue";
import DynamicParams from "@com/DynamicParams.vue";
import ChooseProduct from "@com/marketing/ChooseProduct.vue";
import $ from "@util/base";
import { $msg, $box } from "@ui/msg";
import api from "@api/homepage";

const data = ref([]);
const typeName = "recommend";

const recommendParams = ref(null);
const modifyId = ref(null);
let type = "add";

const typeOptions = {
  1025001: {
    val: "goods",
    title: "商品"
  },
  1025002: {
    val: "travel",
    title: "旅行"
  },
  1025004: {
    val: "hotel",
    title: "酒店"
  }
}

function addRecommend(val) {
  type = "add";
  if (recommendParams.value.getValue().length < 100) {
    openChooseProduct(val);
  } else {
    $msg.error("最多添加100个");
  }
}
function delRecommend(index) {
  let data = recommendParams.value.getValue()[index];
  $box.open("删除确认", "是否删除", () => {
    api.del(typeName, data.id, () => {
      $msg.succ("删除成功");
      getData();
    });
  });
}
function modifyRecommend(index) {
  type = "modify";
  let data = recommendParams.value.getValue()[index];
  modifyId.value = data.id;
  openChooseProduct(typeOptions[data.recommendType].val)
}
function sortRecommend(data) {
  let idList = data.map((e) => {
    return e.id;
  });
  api.sort(typeName, idList.reverse(), () => {
    $msg.succ("排序修改成功");
    getData();
  });
}

const chooseProductRef = ref(null);
function openChooseProduct(val) {
  chooseProductRef.value.show(val);
}

const recommendType = {
  goods: "1025001",
  travel: "1025002",
  hotel: "1025004",
}

function chooseProduct(data) {
  let form = {}
  form.recommendType = recommendType[data.type]
  form.recommendItem = data.code
  $.handleCRU(type, {
    add: () => {
      addData(form);
    },
    modify: () => {
      form.id = modifyId.value
      modifyData(form);
    },
  });
}

function addData(form) {
  api.add(typeName, form, () => {
    $msg.succ("新增成功");
    getData();
  });
}
function modifyData(form) {
  api.update(typeName, form, () => {
    $msg.succ("修改成功");
    getData();
  });
}

getData();
function getData() {
  api.list(typeName, (val) => {
    data.value = val.list;
  });
}
</script>
